import { ref } from 'vue'
import { useToggle } from '@vant/use';
export const useIndex = () => {
    const isShowType = ref(false)
    const isShowTypeValue = ref('')
    const [showBottom, toggle] = useToggle(false)
    const columnsType = ['year', 'month', 'day'] as any;
    const formatter = (type: any, option: any) => {
        if (type === 'year') {
            option.text += '年';
        }
        if (type === 'month') {
            option.text += '月';
        }
        if (type === 'day') {
            option.text += '日';
        }
        return option;
    };
    const currentDate = ref(['2021', '01', '01']);
    const minDate = new Date(2020, 0, 1)
    const maxDate = new Date(2025, 5, 1)
    const dateChange = (value: any) => {
        currentDate.value = value.selectedValues
    }
    const getFormattedDate = (dateArray: any) => {
        const [year, month, day] = dateArray;
        const formattedMonth = month.padStart(2, '0');
        const formattedDay = day.padStart(2, '0');
        return `${formattedMonth}/${formattedDay}`;
    }

    // 性别
    const sixList = ref([
        {
            title: '男生',
            status: false,
            id: 1
        },
        {
            title: '女生',
            status: false,
            id: 2
        }
    ])
    const whetherOrNotToCheck = (selectedItem: any) => {
        sixList.value.forEach(item => {
            item.status = item.id === selectedItem.id;
        });
    }
    const getSelectedItemTitle = (list: any) => {
        const selectedItem = list.find((item: { status: boolean; }) => item.status === true);
        return selectedItem ? selectedItem.title : '';
    }


    return {
        isShowType,
        isShowTypeValue,
        columnsType,
        formatter,
        currentDate,
        minDate,
        maxDate,
        getFormattedDate,
        dateChange,
        showBottom,
        toggle,
        sixList,
        whetherOrNotToCheck,
        getSelectedItemTitle
    }
}